import React,{useState,useEffect} from 'react'
import { Menu,SearchBar} from '@nutui/nutui-react'
import { Share,  ArrowLeft } from '@nutui/icons-react'
import { useNavigate } from 'react-router-dom'
import '../css/scenicSpot.css'
import axios from 'axios'

export default function ScenicSpot() {
  let navigate = useNavigate()
  let [ser, setSer] = useState('')
  useEffect(()=>{
    getData()
  },[])
  //menu菜单
  const [options1] = useState([
    { text: '综合排序', value: 'a' },
    { text: '价格正序', value: '1' },
    { text: '价格倒序', value: '-1' },
    { text:'评分正序', value: '2' },
    { text:'评分倒序', value: '-2' },
  ])
  const [options2] = useState([
    { text: '筛选', value: 'a1' },
    { text:'5A景区',value:'5A'},
    { text:'4A景区',value:'4A'},
  ])
  const [stateTwo, setStateTwo] = useState('a')
  const [stateThree, setStateThree] = useState('a1')
  //获取数据
  const [dataList,setDataList] = useState([])
  let getData = async()=>{
    let {data:{code,data}} = await axios.get("http://localhost:3000/jingqu")
    if(code === 200){
      setDataList(data)
    }
  }
  //搜索
  let search = async(a)=>{
    setSer(a)
    let {data:{code,data}} = await axios.get("http://localhost:3000/jingqu?ser="+a)
    if(code === 200){
      setDataList(data)
    }
  }
  //排序
  let paixu = (val)=>{
    setStateTwo(val)
    let copy = [...dataList]
    if(stateTwo === '1'){
      setDataList(copy.sort((a,b)=>b.ticketPrice - a.ticketPrice))
    }
    if(stateTwo === '-1'){
      setDataList(copy.sort((a,b)=>a.ticketPrice - b.ticketPrice))
    }
    if(stateTwo === '2'){
      setDataList(copy.sort((a,b)=>b.rating - a.rating))
    }
    if(stateTwo === '-2'){
      setDataList(copy.sort((a,b)=>a.rating - b.rating))
    }
  }
  //筛选
  let shaixuan = async(val)=>{
    setStateThree(val)
    let {data:{code,data}} = await axios.get('http://localhost:3000/jingqu?grade='+val)
    if(code === 200){
      setDataList(data)
    }
  }
  return (
    <div>
        <SearchBar backable value={ser} onChange={(ser)=>search(ser)}  placeholder="" />
      <Menu>
      <Menu.Item
        options={options1}
        value={stateTwo}
        onChange={(val) => {
          ;paixu(val.value)
          
        }}
      />
      <Menu.Item
        options={options2}
        value={stateThree}
        onChange={(val) => {
          shaixuan(val.value)
        }}
      />
    </Menu>
    {
      dataList.map(item=>{
        return <div key={item._id} onClick={()=>{navigate('/app/jingquxiangqing?_id='+item._id)}} className='items'>
          <div className="left">
            <img src={item.images[0]} alt="" />
          </div>
          <div className="right">
            <h2 style={{fontSize:'16px'}}>{item.name}</h2>
            <p style={{margin:'10px 0'}}>景区开放时间：{item.openingHours}</p>
            <h3 style={{color:'orange',fontSize:'16px'}}>￥{item.ticketPrice}.00起</h3>
          </div>
        </div>
      })
    }
    </div>
  )
}
